<template>
    <div class="menuBar" v-if="barItem.child">
        <el-submenu v-if="barItem.child.length > 0" :index="barItem.path">
            <template>
                <!-- <i class="el-icon-menu"></i> -->
                <span slot="title">{{ barItem.name}}</span>
            </template>
            <side-bar-item v-for="(item,index) in barItem.child" :barItem="item" :key="index">
            </side-bar-item>
        </el-submenu> 
        <el-menu-item v-else :route="barItem.route" :index="barItem.path">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title">{{ barItem.name}}</span>
        </el-menu-item>
    </div>    
</template>

<script>
export default {
    name:'SideBarItem',
    data(){
        return {

        }
    },
    props:{
        barItem:{
            type:Object,
            require:true
        }
    }
}
</script>

<style lang="less" scoped>
    // .el-icon-menu{
    //     display: inline-block;
    //     width: 8px;
    //     height: 8px;
    //     border-radius: 50%;
    //     background-color: ;
    // }

</style>